<template>
    <div id="index_s">
        <el-tabs type="border-card">
            <!--*************【点餐】********************-->
            <el-tab-pane label="点  餐">
                <!--===========1.整体菜品展示区域-->
                <div id="order">
                    <!-- ***********搜索菜品*******-->
                    <el-row style="margin-bottom: 20px;">
                        <el-col :span="6">
                            <el-input placeholder="请输入内容" size="small">
                                <el-button slot="append" icon="el-icon-search" size="small"></el-button>
                            </el-input>
                        </el-col>
                        <el-button type="primary" style="float:right" :flag="true"
                                   size="small" plain @click="detail">点餐完成</el-button>
                    </el-row>
                    <!--************菜品表*********-->
                    <el-table size="small" :cell-style="cell_style" :header-cell-style="header_style"
                              border style="width: 100%" :data="tableDish">
                        <!--                        <el-table-column type="index" label="#"></el-table-column>-->
                        <el-table-column prop="name" label="菜品名称" width="180"></el-table-column>
                        <el-table-column prop="price" label="菜品单价"></el-table-column>
                        <el-table-column prop="classifyId" label="菜品分类"></el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary"
                                           size="mini"
                                           @click="handleAdd(scope.$index, scope.row)">添加</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--************分页***********-->
                    <el-pagination background layout="prev, pager, next"
                                   @current-change="changePage"
                                   :current-page="query.currentPage"
                                   :page-size="query.pageSize"
                                   :total="total">
                    </el-pagination>
                </div>
                <!--===========2.添加的菜品详情区域-->
                <!-- <div id="details">
                     <hr style="margin-bottom: 20px">
                     <span>订 单 号 ：</span>
                     <el-input placeholder="系统生成的订单号" size="small" v-model="orderId"></el-input>
                     <br>
                     <span>餐 桌 号 ：</span>
                     <el-input placeholder="请输入餐桌号" size="small" v-model="seatNum"></el-input>
                     <br>
                     <span>总 金 额 ：</span>
                     <el-input placeholder="总计" size="small" v-model="totalPrice"></el-input>
                     <el-table border style="width: 65%" size="small" :cell-style="cell_style"
                               :header-cell-style="header_style" :data="detailsList">
                         <el-table-column label="菜品名称" width="180" prop="name"></el-table-column>
                         <el-table-column label="单价" width="180" prop="price"></el-table-column>
                         <el-table-column label="数量" width="180" prop="num"></el-table-column>
                         <el-table-column label="操作" prop="">
                             <template slot-scope="scope">
                                 <el-button type="primary" icon="el-icon-minus"
                                            size="mini" plain @click="sub(scope.$index,scope.row)"></el-button>
                                 <el-button type="primary" icon="el-icon-plus" class="addBtn"
                                            size="mini" plain @click="add(scope.row)"></el-button>
                             </template>
                         </el-table-column>
                     </el-table>
                     <div id="btn">
                         <el-button type="primary" plain>会员支付</el-button>
                         <el-button type="success" plain>非会员支付</el-button>
                         <el-button type="info" plain>取  消</el-button>
                     </div>
                 </div>-->
            </el-tab-pane>
            <!--*************【外卖】********************-->
            <!--<el-tab-pane label="外  卖">
                <div id="take">
                    &lt;!&ndash;搜索区域&ndash;&gt;
                    <el-row style="margin-bottom: 20px;">
                        <el-col :span="6">
                            <el-input placeholder="请输入内容" size="small">
                                <el-button slot="append" icon="el-icon-search"
                                           size="small"></el-button>
                            </el-input>
                        </el-col>
                    </el-row>
                    &lt;!&ndash;外卖列表区域&ndash;&gt;
                    <el-table  border style="width: 100%"
                            :cell-style="cell_style"
                            :header-cell-style="header_style"
                            size="small" :data=""><el-table-column type="index" label="#"></el-table-column>
                        <el-table-column prop="orderId" label="订单号" width="150"></el-table-column>
                        <el-table-column prop="createTime" label="订单时间" width="150"></el-table-column>
                        <el-table-column prop="name" label="点餐人姓名"></el-table-column>
                        <el-table-column prop="telephone" label="联系电话"></el-table-column>
                        <el-table-column prop="" label="订单状态"></el-table-column>
                        <el-table-column prop="" label="菜品"></el-table-column>
                        <el-table-column prop="" label="订单消费"></el-table-column>
                    </el-table>
                    &lt;!&ndash;外卖分页区域&ndash;&gt;
&lt;!&ndash;                    <el-pagination background layout="prev, pager, next"&ndash;&gt;
&lt;!&ndash;                                   @current-change="changePage1"&ndash;&gt;
&lt;!&ndash;                                   :current-page="currentPage1"&ndash;&gt;
&lt;!&ndash;                                   :page-size="5"&ndash;&gt;
&lt;!&ndash;                                   :total="total1">&ndash;&gt;
&lt;!&ndash;                    </el-pagination>&ndash;&gt;
                </div>
            </el-tab-pane>-->
        </el-tabs>
    </div>
</template>

<script>
    import {mapState,mapActions} from 'vuex'
    import axios from '../../http/http'
    import * as api from '../../http/api'
    export default {
        name: "syn_index",
        data() {
            return {
                detailsList:[],
                flag:true,
                orderId:'',
                seatArr:[],
                myNum:1,//添加菜品的数量，默认为1,
                query:{
                    currentPage:1,
                    pageSize:5
                },
                total:0,
                tableDish:[]
            }
        },
        created(){
            this.getMenu();
            // this.getOrderId();
            // this.getSeatId();
        },
        computed:{
            // ...mapState({
            //     tableDish:function(state){
            //         return state.dishStore.dishList
            //     },
            //     tableTake:function(state){
            //         return state.takeStore.takeList
            //     },
            //     total:function(state){
            //         return state.dishStore.total;
            //     },
            //     total1:function(state){
            //         return state.takeStore.takeList.total;
            //     },
            //     query:function(state){
            //         return state.dishStore.query;
            //     }
            // }),
            //空闲餐桌编号
            seatNum(){
                for(let i=0;i<this.seatArr.length;i++){
                    if(this.seatArr[i].state === 0){
                        this.seatArr[i].state = 1;
                        return this.seatArr[i].number
                    }
                }
            },
            totalPrice(){
                let money = 0;
                for(let i=0;i<this.detailsList.length;i++){
                    money += this.detailsList[i].num * this.detailsList[i].price
                }
                return money;
            }
        },
        methods: {
            getMenu(){
                return axios({
                    url:api.menu,
                    method:'get',
                    params:this.query
                }).then(res=>{
                    console.log(res.data);
                    // commit('dishData',res.data);
                    this.tableDish =res.data.info;
                    this.total = res.data.pager.totalSize;
                    return res.data
                })
            }
        },
        //以下代码处理分页
        changePage(newPage){
            this.query.currentPage = newPage;
            this.getMenu();
        },

        // ...mapActions(['getMenu','getTake']),
        cell_style(row, column, rowIndex, columnIndex) {
            return ' text-align: center';
        },
        header_style(row, rowIndex) {
            return ' text-align: center;';
        },
        //完成点餐后的显示区域
        detail(){
            let detail = document.getElementById('details');
            if(this.flag){
                detail.style.display = 'block';
                this.flag = false;
            }else{
                detail.style.display = 'none';
                this.flag = true;
            }
        },
        //增加所选菜品数量
        add(row){
            if(row.num<5){
                row.num++;
            }
            if(row.num===5){
                row.num = 5
            }
        },
        //减少所选菜品数量
        sub(index,row){
            if(row.num>0){
                row.num--;
            }
            if(row.num===0){
                this.detailsList.splice(index,1)
            }
        },
        //添加菜品
        handleAdd(index, row) {
            this.detailsList.push(
                {name:row.name, price:row.price,num:this.myNum}
            );
            // this.totalPrice += row.price;
        },
        //获取订单号
        // getOrderId(){
        //     return axios({
        //         url:'rms/front/trade/order',
        //         method:'get'
        //     }).then(res=>{
        //         this.orderId = res.data.info;
        //         // console.log(this.orderId);
        //     })
        // },
        // //获得餐桌号
        // getSeatId(){
        //     return axios({
        //         url:'rms/front/trade/freeSeat',
        //         method:'get'
        //     }).then(res=>{
        //         this.seatArr = res.data.info;
        //         // console.log(this.seatArr)
        //     })
        // },
        //    提交数据
        //     vipSubmit(){
        //         return axios({
        //             url:'rms/front/trade/commit',
        //             method:'post',
        //             data:{
        //                 address:'',
        //                 details:this.detailsList,
        //                 name: "string",
        //                 orderId: this.orderId,
        //                 orderType: 0,
        //                 seatsId: this.seatNum,
        //                 telephone: "string",
        //                 totalPrice: this.totalPrice
        //             }
        //         }).then(res=>{
        //
        //             })
        //     }
    }
</script>

<style scoped lang="less">
    #order{
        overflow: hidden;
        /*height:500px;*/
    }
    .el-pagination{
        margin-top: 50px;
    }
    #details{
        display: none;
        text-align: left;
        /*border:1px solid red;*/
        margin-top: 30px;
        .el-input{
            width:25%;
            margin-bottom: 20px;
        }
        #btn{
            margin-top:20px;
            button:nth-child(1){
                margin:0 50px 0 400px;
            };
            button:nth-child(2){
                margin-right:50px;
            };
        }
    }

</style>